<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户1</title>
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="/Public/statics/font-awesome-4.4.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__PUBLIC_CSS__/base.css" />
</head>
<body>

<button class="bjy-rong-chat" targetid="89" avatar="/Upload/avatar/user2.jpg" targetname="admin2">点击与用户2（admin2）聊天</button>

<!-- 聊天框开始 -->
<div class="modal fade" id="bjy-chat-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="bjy-top">
                <div class="bjy-t-myinfo">
                    {$_SESSION['user']['username']}
                    <img class="bjy-t-avatar" src="{:get_url($_SESSION['user']['avatar'])}">
                </div>
                <div class="bjy-t-title">
                    <span class="bjy-tt-name"></span>
                    <span class="bjy-tt-edu"></span>
                    <div class="bjy-tt-close" data-dismiss="modal" aria-hidden="true"></div>
                </div>
            </div>
            <div class="bjy-chat bjy-emoji-out3">
                <div class="bjy-friend-list"></div>
                <div class="bjy-chat-box bjy-show-out">
                    <div class="bjy-cb-history"></div>
                    <div class="bjy-cb-middle">
                        <button type="button" class="bjy-emoji-ico"></button>
                        <div class="bjy-emoji-box">
                            <div class="bjy-e-triangle" style="display:block;width:20px;height:20px;">
                                <div style="display:block;position:absolute;left:10px;top:10px;width:0;height:0;border-style:solid;border-width:10px;border-color:transparent transparent #eee  transparent;"></div>
                                <div style="display:block;position:absolute;left:10px;top:11px;;width:0;height:0;border-style:solid;border-width:10px;border-color:transparent transparent #fff transparent;"></div>
                            </div>
                            <div class="xb-h-10"></div>
                            <ul class="nav nav-tabs">
                                <li class="active bjy-emoji-category">
                                    <a href="#bjy-face-11" data-toggle="tab">表情</a>
                                </li>
                                <li class="bjy-emoji-category">
                                    <a href="#bjy-face-12" data-toggle="tab">动物</a>
                                </li>
                                <li class="bjy-emoji-category">
                                    <a href="#bjy-face-13" data-toggle="tab">水果</a>
                                </li>
                                <li class="bjy-emoji-category">
                                    <a href="#bjy-face-14" data-toggle="tab">国旗</a>
                                </li>
                                <li class="bjy-emoji-category">
                                    <a href="#bjy-face-15" data-toggle="tab">键盘</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade bjy-emoji-imgs in active" id="bjy-face-11"></div><div class="tab-pane fade bjy-emoji-imgs" id="bjy-face-12"></div>
                                <div class="tab-pane fade bjy-emoji-imgs" id="bjy-face-13"></div>
                                <div class="tab-pane fade bjy-emoji-imgs" id="bjy-face-14"></div>
                                <div class="tab-pane fade bjy-emoji-imgs" id="bjy-face-15"></div>
                            </div>
                        </div>
                    </div>
                    <div class="bjy-cb-sendbox">
                        <textarea class="bjy-emoji-textarea bjy-emoji-from3 bjy-cbs-content hide" name="content"></textarea>
                        <div class="bjy-show-box bjy-emoji-box3" contenteditable="true"></div>
                    </div>
                    <ul class="bjy-cb-handle">
                        <li class="bjy-cbh-close" data-dismiss="modal" aria-hidden="true">关闭</li>
                        <li class="bjy-cbh-send" data-uid=''>发送</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 聊天框结束 -->

<!-- 引入bootstrjs部分开始 -->
<script src="//libs.useso.com/js/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    var xbIsLogin=1,
        rongUserInfoUrl="{:U('Api/Rong/get_user_info')}",
        rongKey="{$rong_key}",
        rongToken="{$rong_token}",
        xbUserInfo = {
            id: "{$uid}",
            name: "{$username}",
            avatar: "{$avatar}"
        };
    // 下面的代码是用来测试的
    $('#bjy-chat-modal').modal('show');
    setTimeout(function(){
        $('.bjy-fl-one').click();
    },2000)
</script>
<script src="__PUBLIC__/statics/emoji/js/config.js"></script>
<script src="__PUBLIC__/statics/emoji/js/emoji-picker.js"></script>
<script src="__PUBLIC__/statics/emoji/js/jquery.emojiarea.js"></script>
<script src="http://cdn.ronghub.com/RongIMLib-2.0.6.beta.min.js"></script>
<script src="http://cdn.ronghub.com/RongEmoji-2.0.2.beta.min.js"></script>
<script src="__PUBLIC__/statics/rongcloud/js/main.js"></script>
<script src="__PUBLIC_JS__/base.js"></script>
<script>
$(function(){
    // 初始化emoji
    window.emojiPicker = new EmojiPicker({
        emojiable_selector: '[data-emojiable=true]',
        assetsPath: 'http://xueba17.oss-cn-beijing.aliyuncs.com/Public/statics/emoji/images',
        'iconSize': 20
    });
    window.emojiPicker.discover();
     
 
    // 需要转emoji的选择器 表情选择、学霸秀、聊天框
    var toEmoji=['.bjy-emoji-box','.lqk-cfont-one','.bjy-cbhl-content,.lqk-sshow-info'];
    $.each(toEmoji, function(index, val) {
        $.each($(val), function(k, v) {
            var str=$(v).html();
            var newStr=window.emojiPicker.unicodeToImage(str);
            $(v).html(newStr);            
        });
 
    });
    // 评论框内的图片转换为from中utf8
    var imageDiv=['.bjy-emoji-box1','.bjy-emoji-box2','.bjy-emoji-box3'];
    var emojiFrom=['.bjy-emoji-from1','.bjy-emoji-from2','.bjy-emoji-from3'];
    $.each(imageDiv, function(index, val) {
        $(val).blur(function(event) {
            var str=emojiDeleteTag($(this).html());
            $(emojiFrom[index]).val(str);
        });
    });
 
    /**
     * 将带有emoji图片的字符串转为utf8
     * @param  {string} str 带emoji图片的字符串
     * @return {string}     utf8字符串
     */
    function emojiDeleteTag(str){
        var str=str.replace(/<img.*?src=\".*?\".*?style=\".*?\".*?alt=\"/g,'');
        var str=str.replace(/<img.*?style=\'.*?\'.*?alt=\"/g,'');
        var str=str.replace(/\".*?src=\".*?\">/g,'');
        str=str.replace(/:">/g,':');
        str=window.emojiPicker.colonToUnicode(str);
        return str;
    }
    // 显示或隐藏表情框
    $('.bjy-emoji-ico').click(function(event) {
        var parentObj=$(this).parents('.bjy-show-out').eq(0);
        parentObj.find('.bjy-emoji-box').toggleClass('show');
        parentObj.find('.bjy-emoji-category').eq(0).click();
    });
    // 点击emoji分类；获取分类下的表情
    $('.bjy-emoji-box').on('click', '.bjy-emoji-category', function(event) {
        var indexNumber=$(this).index(),
            thisEmojiConfig=Config.EmojiCategories[indexNumber],
            thisHtml='',
            colon='';
        // 将colon格式的标签转为图片格式
        $.each(thisEmojiConfig, function(index, val) {
            colon +=':'+Config.Emoji[val][1][0]+':';
            thisHtml=window.emojiPicker.colonToImage(colon);
        });
        // 将图片插入到div中
        $(this).parents('.bjy-emoji-box').eq(0).find('.bjy-emoji-imgs').eq(indexNumber).html(thisHtml);
    });
    // 点击添加表情
    $('body').on('click','.bjy-emoji-box img', function(event) {
        var str=$(this).prop("outerHTML");
        $(this).parents('.bjy-show-out').eq(0).find('.bjy-show-box').focus();
        insertHtmlAtCaret(str);
        // 选择表情后关闭表情选择框
        $(this).parents('.bjy-show-out').eq(0).find('.bjy-emoji-box').removeClass('show')
    });
     
})
 
 
/**
 * 在textarea光标后插入内容
 * @param  string  str 需要插入的内容
 */
function insertHtmlAtCaret(str) {
    var sel, range;
    if(window.getSelection){
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var el = document.createElement("div");
            el.innerHTML = str;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
                range.insertNode(frag);
            if(lastNode){
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(str);
    }
}
</script>
</body>
</html>